<template>
  <transition name="bounce" mode="out-in">
    <section class="mui-content meet-detail bg-w">
      <div class="detail-head">
        <router-link :to="{path: '/profile'}" class="mui-action-back mui-pull-left mh-back">
          <span class="mui-icon mui-icon-arrowleft ic-back"></span>
        </router-link>
        <a href="#forward" class="ic-share mui-pull-right">
          <img src="../../assets/images/hnico/ic_share.png" alt="分享">
        </a>
      </div>

      <div class="main-info mui-text-center flex-bt">
        <div class="info-lt flex">
          <div class="info-lt-l">
            <div class="avatar-pic">
              <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3800601310,3104140482&fm=26&gp=0.jpg" alt="头像">
            </div>
          </div>
          <div class="info-lt-r mui-text-left">
            <p class="u-name">用户名</p>
            <p class="u-info">用户名 23岁 | 160cm | 河南郑州</p>
          </div>
        </div>
        <div class="info-rt">
          <img src="../../assets/images/bg/bg_qrcode.png" alt="">
        </div>
      </div>

      <section class="detail-inner">
        <div class="mh-para">
          <h4>ta的才艺</h4>
          <div class="mh-para-cont">
            <div class="talent-wrapper flex">
              <div class="talent-list">
                <swiper :options="swiperOption" ref="talentSwiper">
                  <!-- slides -->
                  <swiper-slide v-for="item in talents" :key="item.id">
                    <img :src="item.imgSrc" alt="">
                  </swiper-slide>
                </swiper>
              </div>
              <div class="btn-more" @click="moreTalents">
                <img src="../../assets/images/ico/ico_more_cir.png" alt="更多才艺">
                <span>更多</span>
              </div>
            </div>
          </div>
        </div>

        <div class="mh-para">
          <div class="nav-link">
            <a class="mui-navigate-right">ta的网友 </a>
          </div>
          <div class="mh-para-cont">
            <div class="img-wrapper flex-bt">
              <div class="mui-text-center" v-for="item in dynamicPic" :key="item.id">
                <div class="img-box">
                  <img :src="item.imgSrc" :key="item.id" alt="照片">
                </div>
                <p>用户名</p>
              </div>
            </div>
          </div>
        </div>

        <div class="mh-para">
          <div class="nav-link">
            <a href="javascript:">个人介绍</a>
          </div>
          <div class="mh-para-cont">
            <p class="intro">天空不留下鸟的痕迹但我已飞过</p>
          </div>
        </div>

        <div class="mh-para">
          <div class="nav-link">
            <a href="javascript:">择偶意向</a>
          </div>
          <div class="mh-para-cont">
            <ul class="info-list">
              <li class="flex intention">
                <span class="label">年龄：</span>
                <span :class="{active: intentionInfo.age}"
                      v-text="!intentionInfo.age ? '未填写' : intentionInfo.age">00-00</span>
              </li>
              <li class="flex intention">
                <span class="label">身高：</span>
                <span :class="{active: intentionInfo.height}"
                      v-text="!intentionInfo.height ? '未填写' : intentionInfo.height">--cm</span>
              </li>
              <li class="flex intention">
                <span class="label">体型：</span>
                <span :class="{active: intentionInfo.bodyType}"
                      v-text="!intentionInfo.bodyType ? '未填写' : intentionInfo.bodyType">--</span>
              </li>
              <li class="flex intention">
                <span class="label">学历：</span>
                <span :class="{active: intentionInfo.edu}"
                      v-text="!intentionInfo.edu ? '未填写' : intentionInfo.edu">--</span>
              </li>
              <li class="flex intention">
                <span class="label">月收入：</span>
                <span :class="{active: intentionInfo.income}"
                      v-text="!intentionInfo.income ? '未填写' : intentionInfo.income">--</span>
              </li>
              <li class="flex intention">
                <span class="label">居住地：</span>
                <span :class="{active: intentionInfo.address}"
                      v-text="!intentionInfo.address ? '未填写' : intentionInfo.address">--</span>
              </li>
              <li class="flex intention">
                <span class="label">婚姻状况：</span>
                <span :class="{active: intentionInfo.marriage}"
                      v-text="!intentionInfo.marriage ? '未填写' : intentionInfo.marriage">--</span>
              </li>
              <li class="flex intention">
                <span class="label">购房情况：</span>
                <span :class="{active: intentionInfo.house}"
                      v-text="intentionInfo.house === '' ? '未填写' : intentionInfo.house">--</span>
              </li>
              <li class="flex intention">
                <span class="label">有无子女：</span>
                <span :class="{active: intentionInfo.child}"
                      v-text="!intentionInfo.child ? '未填写' : intentionInfo.child">--</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="mh-para">
          <div class="nav-link">
            <a href="javascript:">兴趣爱好</a>
          </div>
          <div class="mh-para-cont">
            <div class="mh-pd-lr">
              <span class="hobby" v-for="item in hobby" v-text="item">爱好</span>
            </div>
          </div>
        </div>

        <div class="mh-para">
          <div class="nav-link">
            <a href="javascript:">基本资料</a>
          </div>
          <div class="mh-para-cont">
            <ul class="info-list">
              <li class="flex intention">
                <span class="label">ID：</span>
                <span :class="{active: baseInfo.id}"
                      v-text="!baseInfo.id ? '未填写' : baseInfo.id">--</span>
              </li>
              <li class="flex intention">
                <span class="label">昵称：</span>
                <span :class="{active: baseInfo.nickname}"
                      v-text="!baseInfo.nickname ? '未填写' : baseInfo.nickname">--</span>
              </li>
              <li class="flex intention">
                <span class="label">性别：</span>
                <span :class="{active: baseInfo.sex}"
                      v-text="!baseInfo.sex ? '未填写' : baseInfo.sex">--</span>
              </li>
              <li class="flex intention">
                <span class="label">生日：</span>
                <span :class="{active: baseInfo.birthday}"
                      v-text="!baseInfo.birthday ? '未填写' : baseInfo.birthday">--</span>
              </li>
              <li class="flex intention">
                <span class="label">属相：</span>
                <span :class="{active: baseInfo.zodiac}"
                      v-text="!baseInfo.zodiac ? '未填写' : baseInfo.zodiac">--</span>
              </li>
              <li class="flex intention">
                <span class="label">星座：</span>
                <span :class="{active: baseInfo.constellation}"
                      v-text="!baseInfo.constellation ? '未填写' : baseInfo.constellation">--</span>
              </li>
              <li class="flex intention">
                <span class="label">身高：</span>
                <span :class="{active: baseInfo.height}"
                      v-text="!baseInfo.height ? '未填写' : baseInfo.height">--</span>
              </li>
              <li class="flex intention">
                <span class="label">学历：</span>
                <span :class="{active: baseInfo.edu}"
                      v-text="!baseInfo.edu ? '未填写' : baseInfo.edu">--</span>
              </li>
              <li class="flex intention">
                <span class="label">职业：</span>
                <span :class="{active: baseInfo.career}"
                      v-text="!baseInfo.career ? '未填写' : baseInfo.career">--</span>
              </li>
              <li class="flex intention">
                <span class="label">婚姻状况：</span>
                <span :class="{active: baseInfo.marriage}"
                      v-text="!baseInfo.marriage ? '未填写' : baseInfo.marriage">--</span>
              </li>
              <li class="flex intention">
                <span class="label">子女情况：</span>
                <span :class="{active: baseInfo.child}"
                      v-text="!baseInfo.child ? '未填写' : baseInfo.child">--</span>
              </li>
              <li class="flex intention">
                <span class="label">所在地区：</span>
                <span :class="{active: baseInfo.city}"
                      v-text="!baseInfo.city ? '未填写' : baseInfo.city">--</span>
              </li>
              <li class="flex intention">
                <span class="label">家乡：</span>
                <span :class="{active: baseInfo.hometown}"
                      v-text="!baseInfo.hometown ? '未填写' : baseInfo.hometown">--</span>
              </li>
              <li class="flex intention">
                <span class="label">月收入：</span>
                <span :class="{active: baseInfo.income}"
                      v-text="!baseInfo.income ? '未填写' : baseInfo.income">--</span>
              </li>
              <li class="flex intention">
                <span class="label">购房情况：</span>
                <span :class="{active: baseInfo.house}"
                      v-text="!baseInfo.house ? '未填写' : baseInfo.house">--</span>
              </li>
              <li class="flex intention">
                <span class="label">居住状态：</span>
                <span :class="{active: baseInfo.liveStatus}"
                      v-text="!baseInfo.liveStatus ? '未填写' : baseInfo.liveStatus">--</span>
              </li>
              <li class="flex intention">
                <span class="label">购车情况：</span>
                <span :class="{active: baseInfo.car}"
                      v-text="!baseInfo.car ? '未填写' : baseInfo.car">--</span>
              </li>
              <li class="flex intention">
                <span class="label">微信号：</span>
                <span :class="{active: baseInfo.wechat}"
                      v-text="!baseInfo.wechat ? '未填写' : baseInfo.wechat">*********</span>
              </li>
              <li class="flex intention">
                <span class="label">手机号码：</span>
                <span :class="{active: baseInfo.phone}"
                      v-text="!baseInfo.phone ? '未填写' : baseInfo.phone">*********</span>
              </li>
              <li class="flex intention">
                <span class="label">电话号码：</span>
                <span :class="{active: baseInfo.tel}"
                      v-text="!baseInfo.tel ? '未填写' : baseInfo.tel">*********</span>
              </li>
              <li class="flex intention">
                <span class="label">QQ：</span>
                <span :class="{active: baseInfo.qq}"
                      v-text="!baseInfo.qq ? '未填写' : baseInfo.qq">*********</span>
              </li>
              <li class="flex intention">
                <span class="label">其他方式：</span>
                <span :class="{active: baseInfo.other}"
                      v-text="!baseInfo.other ? '未填写' : baseInfo.other">*********</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="mh-para">
          <div class="nav-link">
            <a href="javascript:">小档案</a>
          </div>
          <div class="mh-para-cont">
            <ul class="info-list">
              <li class="flex intention">
                <span class="label">家乡：</span>
                <span :class="{active: fileInfo.hometown}"
                      v-text="!fileInfo.hometown ? '未填写' : fileInfo.hometown">--</span>
              </li>
              <li class="flex intention">
                <span class="label">户口：</span>
                <span :class="{active: fileInfo.account}"
                      v-text="!fileInfo.account ? '未填写' : fileInfo.account">--</span>
              </li>
              <li class="flex intention">
                <span class="label">民族：</span>
                <span :class="{active: fileInfo.nationality}"
                      v-text="!fileInfo.nationality ? '未填写' : fileInfo.nationality">--</span>
              </li>
              <li class="flex intention">
                <span class="label">属相：</span>
                <span :class="{active: fileInfo.zodiac}"
                      v-text="!fileInfo.zodiac ? '未填写' : fileInfo.zodiac">--</span>
              </li>
              <li class="flex intention">
                <span class="label">星座：</span>
                <span :class="{active: fileInfo.constellation}"
                      v-text="!fileInfo.constellation ? '未填写' : fileInfo.constellation">--</span>
              </li>
              <li class="flex intention">
                <span class="label">血型：</span>
                <span :class="{active: fileInfo.blood}"
                      v-text="!fileInfo.blood ? '未填写' : fileInfo.blood">--</span>
              </li>
              <li class="flex intention">
                <span class="label">体型：</span>
                <span :class="{active: fileInfo.bodyType}"
                      v-text="!fileInfo.bodyType ? '未填写' : fileInfo.bodyType">--</span>
              </li>
              <li class="flex intention">
                <span class="label">体重：</span>
                <span :class="{active: fileInfo.weight}"
                      v-text="!fileInfo.weight ? '未填写' : fileInfo.weight">--</span>
              </li>
              <li class="flex intention">
                <span class="label">相貌自评：</span>
                <span :class="{active: fileInfo.selfEvaluation}"
                      v-text="!fileInfo.selfEvaluation ? '未填写' : fileInfo.selfEvaluation">--</span>
              </li>
              <li class="flex intention">
                <span class="label">宗教信仰：</span>
                <span :class="{active: fileInfo.faith}"
                      v-text="!fileInfo.faith ? '未填写' : fileInfo.faith">--</span>
              </li>
              <li class="flex intention">
                <span class="label">是否喝酒：</span>
                <span :class="{active: fileInfo.drink}"
                      v-text="!fileInfo.drink ? '未填写' : fileInfo.drink">--</span>
              </li>
              <li class="flex intention">
                <span class="label">是否抽烟：</span>
                <span :class="{active: fileInfo.smoke}"
                      v-text="!fileInfo.smoke ? '未填写' : fileInfo.smoke">--</span>
              </li>
              <li class="flex intention">
                <span class="label">生活作息：</span>
                <span :class="{active: fileInfo.lifestyle}"
                      v-text="!fileInfo.lifestyle ? '未填写' : fileInfo.lifestyle">--</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="mh-para">
          <div class="nav-link">
            <a href="javascript:">教育及工作</a>
          </div>
          <div class="mh-para-cont">
            <ul class="info-list">
              <li class="flex intention">
                <span class="label">毕业院校：</span>
                <span :class="{active: educateWork.graduatedSchool}"
                      v-text="!educateWork.graduatedSchool ? '未填写' : educateWork.graduatedSchool">--</span>
              </li>
              <li class="flex intention">
                <span class="label">所属专业：</span>
                <span :class="{active: educateWork.profession}"
                      v-text="!educateWork.profession ? '未填写' : educateWork.profession">--</span>
              </li>
              <li class="flex intention">
                <span class="label">职业职务：</span>
                <span :class="{active: educateWork.position}"
                      v-text="!educateWork.position ? '未填写' : educateWork.position">--</span>
              </li>
              <li class="flex intention">
                <span class="label">公司性质：</span>
                <span :class="{active: educateWork.comType}"
                      v-text="!educateWork.comType ? '未填写' : educateWork.comType">--</span>
              </li>
              <li class="flex intention">
                <span class="label">公司行业：</span>
                <span :class="{active: educateWork.comIndustry}"
                      v-text="!educateWork.comIndustry ? '未填写' : educateWork.comIndustry">--</span>
              </li>
              <li class="flex intention">
                <span class="label">工作状态：</span>
                <span :class="{active: educateWork.workStatus}"
                      v-text="!educateWork.workStatus ? '未填写' : educateWork.workStatus">--</span>
              </li>
              <li class="flex intention">
                <span class="label">掌握语言：</span>
                <span :class="{active: educateWork.lang}"
                      v-text="!educateWork.lang ? '未填写' : educateWork.lang">--</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="mh-para">
          <div class="nav-link">
            <a href="javascript:">家庭情况</a>
          </div>
          <div class="mh-para-cont">
            <ul class="info-list">
              <li class="flex intention">
                <span class="label">家中排行：</span>
                <span :class="{active: family.ranking}"
                      v-text="!family.ranking ? '未填写' : family.ranking">--</span>
              </li>
              <li class="flex intention">
                <span class="label">父母情况：</span>
                <span :class="{active: family.parents}"
                      v-text="!family.parents ? '未填写' : family.parents">--</span>
              </li>
              <li class="flex intention">
                <span class="label">父亲工作：</span>
                <span :class="{active: family.father}"
                      v-text="!family.father ? '未填写' : family.father">--</span>
              </li>
              <li class="flex intention">
                <span class="label">母亲工作：</span>
                <span :class="{active: family.mother}"
                      v-text="!family.mother ? '未填写' : family.mother">--</span>
              </li>
              <li class="flex intention">
                <span class="label">父母经济：</span>
                <span :class="{active: family.parentsEconomic}"
                      v-text="!family.parentsEconomic ? '未填写' : family.parentsEconomic">--</span>
              </li>
              <li class="flex intention">
                <span class="label">父母医保：</span>
                <span :class="{active: family.blood}"
                      v-text="!family.blood ? '未填写' : family.blood">--</span>
              </li>
              <li class="flex intention">
                <span class="label">父母联系方式：</span>
                <span :class="{active: family.parentsContact}"
                      v-text="!family.parentsContact ? '未填写' : family.parentsContact">--</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="mh-para">
          <div class="nav-link">
            <a href="javascript:">爱情规划</a>
          </div>
          <div class="mh-para-cont">
            <ul class="info-list">
              <li class="flex intention">
                <span class="label">想何时结婚：</span>
                <span :class="{active: lovePlan.marryTime}"
                      v-text="!lovePlan.marryTime ? '未填写' : lovePlan.marryTime">--</span>
              </li>
              <li class="flex intention">
                <span class="label">愿与对方父母同住：</span>
                <span :class="{active: lovePlan.willingLiveParents}"
                      v-text="!lovePlan.willingLiveParents ? '未填写' : lovePlan.willingLiveParents">--</span>
              </li>
              <li class="flex intention">
                <span class="label">是否想要小孩：</span>
                <span :class="{active: lovePlan.wilingChild}"
                      v-text="!lovePlan.wilingChild ? '未填写' : lovePlan.wilingChild">--</span>
              </li>
              <li class="flex intention">
                <span class="label">偏爱的约会方式：</span>
                <span :class="{active: lovePlan.preferDating}"
                      v-text="!lovePlan.preferDating ? '未填写' : lovePlan.preferDating">--</span>
              </li>
              <li class="flex intention">
                <span class="label">希望对方看重：</span>
                <span :class="{active: lovePlan.hopeValue}"
                      v-text="!lovePlan.hopeValue ? '未填写' : lovePlan.hopeValue">--</span>
              </li>
              <li class="flex intention">
                <span class="label">期待的婚礼形式：</span>
                <span :class="{active: lovePlan.expectWedding}"
                      v-text="!lovePlan.expectWedding ? '未填写' : lovePlan.expectWedding">--</span>
              </li>
              <li class="flex intention">
                <span class="label">厨艺状况：</span>
                <span :class="{active: lovePlan.cooking}"
                      v-text="!lovePlan.cooking ? '未填写' : lovePlan.cooking">--</span>
              </li>
              <li class="flex intention">
                <span class="label">家务分工：</span>
                <span :class="{active: lovePlan.houseWork}"
                      v-text="!lovePlan.houseWork ? '未填写' : lovePlan.houseWork">--</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="mh-para">
          <div class="nav-link">
            <a href="javascript:">网友评级</a>
          </div>
          <div class="mh-para-cont">
            <p class="mh-pd-lr">B</p>
          </div>
        </div>

        <div class="mh-para">
          <div class="nav-link">
            <a href="javascript:">备注</a>
          </div>
          <div class="mh-para-cont flex-bt">
            <p class="mh-pd-lr note">暂无备注</p>
            <button type="button" class="link-btn">添加备注</button>
          </div>
        </div>
      </section>

      <div class="btn-row">
        <button type="button" class="mui-btn-block">发信息</button>
      </div>

    </section>
  </transition>
</template>

<script>
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  export default {
    name: "detail",
    data () {
      return {
        swiperOption: {
          loop: true,
          slidesPerView: 2,
          spaceBetween: 10,
          centeredSlides: true,
        },
        talents: [
          {
            id: '1',
            imgSrc: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1713526531,3850193221&fm=26&gp=0.jpg'
          },
          {
            id: '2',
            imgSrc: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3029800330,458735988&fm=15&gp=0.jpg'
          },
          {
            id: '3',
            imgSrc: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3404613670,99136518&fm=15&gp=0.jpg'
          },
          {
            id: '4',
            imgSrc: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1261145105,2743696912&fm=15&gp=0.jpg'
          }
        ],
        dynamicPic: [
          {
            id: '1',
            imgSrc: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=174864653,3708040406&fm=15&gp=0.jpg'
          },
          {
            id: '2',
            imgSrc: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3338827179,964526508&fm=15&gp=0.jpg'
          },
          {
            id: '3',
            imgSrc: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2349628112,3339301703&fm=15&gp=0.jpg'
          },
          {
            id: '4',
            imgSrc: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3129191916,673867751&fm=15&gp=0.jpg'
          }
        ],
        intentionInfo: {
          age: '20-27',
          height: '170cm',
          bodyType: '偏瘦',
          edu: '',
          income: '',
          address: '',
          marriage: '',
          house: '',
          child: ''
        },
        baseInfo: {
          id: '54815223333',
          nickname: 'Darvin',
          sex: '男',
          birthday: '',
          zodiac: '',
          height: '',
          constellation: '',
          edu: '',
          career: '',
          marriage: '',
          child: '',
          city: '',
          hometown: '',
          income: '',
          house: '',
          liveStatus: '',
          car: '',
          wechat: '',
          phone: '',
          tel: '',
          qq: '',
          other: ''
        },
        fileInfo: {
          hometown: '北京',
          account: '东城区',
          nationality: '汉族',
          zodiac: '',
          constellation: '',
          blood: '',
          bodyType: '',
          weight: '',
          selfEvaluation: '',
          faith: '',
          drink: '',
          smoke: '',
          lifestyle: ''
        },
        educateWork: {
          graduatedSchool: '',
          profession: '',
          position: '',
          comType: '',
          comIndustry: '',
          workStatus: '',
          lang: ''
        },
        family: {
          ranking: '老大',
          parents: '公务员',
          father: '',
          mother: '',
          parentsEconomic: '',
          parentsMedical: '',
          parentsContact: ''
        },
        lovePlan: {
          marryTime: '',
          willingLiveParents: '',
          wilingChild: '',
          preferDating: '',
          hopeValue: '',
          expectWedding: '',
          cooking: '',
          houseWork: ''
        },
        hobby: ['汽车','旅游','阅读','跳伞'],
        guessLike: [
          {
            id: '1',
            name: '张兔兔',
            avatar: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1773633298,2629220769&fm=26&gp=0.jpg'
          },
          {
            id: '2',
            name: '王兔兔',
            avatar: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2000417879,3233091669&fm=15&gp=0.jpg'
          },
          {
            id: '3',
            name: '李兔兔',
            avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1738636455,3694468788&fm=15&gp=0.jpg'
          },
          {
            id: '4',
            name: '张兔兔',
            avatar: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1773633298,2629220769&fm=26&gp=0.jpg'
          }

        ]
      }
    },
    computed: {
      swiper() {
        return this.$refs.talentSwiper.swiper
      }
    },
    mounted () {
      // let userId = this.$route.query.id;
      // console.log(userId)
      console.log('this is current swiper instance object', this.swiper);
      this.swiper.slideTo(3, 1000, false)
    },
    created () {
      this.$nextTick(function() {
        mui('.mui-progressbar').each(function () {
          mui(this).progressbar({progress:this.getAttribute("data-progress")}).show();
        });
      });
    },
    methods: {
      moreTalents () {
        this.$router.push({
          path: '/meet/talents',
          query: {
            id: '12445'
          }
        })
      },
      interestEdit () {this.$router.push({path: '/profile/interest'})},
      introduceEdit () {this.$router.push({path: '/profile/introduction'})}
    },
    components: {
      swiper,
      swiperSlide
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .swiper-container {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    text-align: center;
    background: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .meet-detail {
    width: 100%;
    height: 100%;
    padding-bottom: 5rem;
    overflow: auto;
    .detail-inner {background: #fff;}
  }
  .detail-head {padding: 0;overflow: auto;}
  .ic-share {
    margin-top: .5rem;
    margin-right: 1.5rem;
    img {width: 1.85rem;height: auto;}
  }
  .ic-export {
    margin-top: .5rem;
    margin-right: 1.5rem;
    img {width: 2rem;height: auto;}
  }
  .avatar {
    position: relative;
    width: 100%;
    height: 13.5rem;
  }
  .avatar-pic-inner {
    @include cl;
    width: 7rem;
    height: 7rem;
    border-radius: 100%;
    /*overflow: hidden;*/
    border: 3px solid rgba(255, 255, 255, .8);
    background-color: #999999;
    bottom: 0;
  }
  .avatar-pic {
    position: relative;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }
    .ic-member {
      position: absolute;
      width: 3rem;
      height: 3rem;
      background: url("../../assets/images/ico/ico_member.png") no-repeat center;
      background-size: 100% 100%;
      right: 0;
      top: -2rem;
      z-index: 4;
    }
  }
  .match-maker {
    @include ct;
    right: 0;
  }
  .match-avatar {
    float: right;
    display: flex;
    align-items: center;
    width: 9.6rem;
    height: 3.6rem;
    padding: .3rem;
    @include sc(1.2rem, #fff);
    background: #7f9ba7;
    border-top: .1rem solid #fff;
    border-bottom: .1rem solid #fff;
    border-top-left-radius: 1.75rem;
    border-bottom-left-radius: 1.75rem;
    img {
      width: 3rem;
      height: 3rem;
      margin-right: .4rem;
      border-radius: 100%;
    }
  }
  .main-info {
    margin: 1.2rem 1rem;
    .sub-info {@include sc(1.2rem, #666);}
  }
  .user-name {@include sc(1.5rem, #333);}
  .img-box {
    @include mh-avatar-box(4.5rem,4.5rem);
    margin-bottom: .5rem;
    background-color: #eeeeee;
  }
  .mh-para {
    padding-bottom: 1rem;
    background: #fff;
    border-bottom: 1px solid #eee;
    h4 {padding: 1.5rem;}
    .img-wrapper {padding: 0 1.5rem;}
    &.border {
      margin-top: 1.5rem;
      border-top: .05rem solid #eee;
    }
  }
  .talent-wrapper {
    width: 100%;
    height: 10rem;
    padding-right: 1.5rem;
    .talent-list {
      height: 10rem;
      overflow: hidden;
      flex: 1;
    }
    .btn-more {
      display: flex;
      height: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 4.75rem;
      float: right;
      @include sc(1.2rem, #999);
      background: #fff;
      img {
        width: 2rem;
      }
    }
  }
  .intro {
    @include sc(1.2rem, #999);
    padding: 0 1.5rem;
  }
  .link-pink {@include sc(1.2rem, #eb537f);}
  .info-list {
    padding: 0 1.5rem;
    .intention {
      padding: .6rem 0;
    }
    span {
      width: 50%;
      @include sc(1.2rem, #999);
      &.active {color: #666;}
    }
  }

  .hobby {
    padding: .3rem .9rem;
    margin-right: 1rem;
    color: #fff;
    font-size: 1.2rem;
    border-radius: 1.2rem;
    background-image: linear-gradient(180deg, #dd65a1 20%,#fa625a 100%);
  }

  .mh-back {
    width: 3rem;
    height: 3rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      height: 1.75rem;
    }
  }
  .file-complete {
    justify-content: center;
    .complete-per {@include sc(1.2rem, #666);}
  }
  .mui-progressbar {
    width: 25%;
    height: .5rem;
    margin-left: 1rem;
    background: #eee;
    border-radius: .4rem;
    span {
      border-radius: .4rem;
      background: linear-gradient(180deg, #dd65a1 0%, #fa625a 100%);
    }
  }
  .nav-link {
    position: relative;
    padding-left: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    a {@include sc(1.4rem, #333);}
    span {@include sc(1.2rem, #999);margin-right: 2.5rem;}
    .btn-edit {
      margin-right: 1.5rem;
      padding: .1rem .6rem;
      @include sc(1.2rem, #f26c60);
      border: 1px solid #f26c60;
    }
  }
  .mui-table-view-cell>a:not(.mui-btn) {
    @include sc(1.5rem, #333);
  }
  .ic-back {@include sc(3rem, #dd65a1)}
  .info-lt-l {
    width: 6rem;
    height: 6rem;
  }
  .info-lt-r {padding-left: .5rem;}
  .cur-level,.u-info {
    @include sc(1.2rem, #666);
    &>span {@include sc(1.2rem, #eb537f);}
  }
  .u-name {@include sc(1.5rem, #333);}
  .info-rt {
    width: 4rem;
    height: 4rem;
    img {
      width: 100%;
      height: 100%;
      margin-right: .4rem;
    }
  }
  .note {flex: 1;}
  .link-btn {
    @include sc(1.2rem, #eb537f);
    margin-right: 1rem;
  }
  .btn-row {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    &>button {
      height: 4.9rem;
      margin-bottom: 0;
      background: #e685aa;
      color: #fff;
    }
  }
</style>
